<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人作品集</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav>
            <div class="logo" data-lang="nav.home">我的作品集</div>
            <ul class="nav-links">
                <li><a href="#home" data-lang="nav.home">首页</a></li>
                <li><a href="#about" data-lang="nav.about">关于我</a></li>
                <li><a href="#projects" data-lang="nav.projects">项目展示</a></li>
                <li><a href="#contact" data-lang="nav.contact">联系我</a></li>
            </ul>
            <div class="lang-switcher">
                <button data-lang="zh" class="lang-btn active">中</button>
                <button data-lang="en" class="lang-btn">En</button>
            </div>
            <div class="hamburger">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>
        </nav>
    </header>

    <!-- 首页部分 -->
    <section id="home" class="hero">
        <div class="hero-content">
            <h1 data-lang="hero.title">你好，我是<span class="highlight">设计师的名字</span></h1>
            <p data-lang="hero.subtitle">专注于创造令人惊艳的设计作品</p>
            <a href="#projects" class="btn" data-lang="hero.cta">查看我的作品</a>
        </div>
    </section>

    <!-- 关于我部分 -->
    <section id="about" class="about">
        <div class="container">
            <h2 data-lang="about.title">关于我</h2>
            <div class="about-content">
                <div class="about-image">
                    <img src="https://upload-bbs.miyoushe.com/upload/2024/08/06/370785112/d3a28a7a86d4c143d072fd5150f80de9_1929240876631792427.png" alt="崩坏星穹铁道黄泉" />
                </div>
                <div class="about-text">
                    <p data-lang="about.text1">我是一位资深的Python Developer，专注于消息中间件、实时数据处理和高可用架构设计。我热衷于解决复杂的技术挑战，并不断探索新技术的应用。</p>
                    <p data-lang="about.text2">在工作之余，我对Rust编程语言有着浓厚的兴趣，也喜欢欣赏动画作品如《幸运星》、《孤独摇滚》和《摇曳露营》，这些爱好为我的技术工作带来了不同的视角和灵感。</p>
                </div>
            </div>
            
            <!-- 技能标签 -->
            <div class="skills">
                <h3 data-lang="skills.title">专业技能</h3>
                <div class="skill-tags">
                    <span class="skill-tag skill-expert">Python</span>
                    <span class="skill-tag skill-expert">MongoDB</span>
                    <span class="skill-tag skill-proficient">Next.js</span>
                    <span class="skill-tag skill-proficient">ElasticSearch</span>
                    <span class="skill-tag skill-familiar">Rust</span>
                </div>
            </div>
            
            <!-- 专业经历时间线 -->
            <div class="timeline">
                <h3 data-lang="timeline.title">专业经历</h3>
                <div class="timeline-items">
                    <div class="timeline-item">
                        <div class="timeline-date">2010-2014</div>
                        <div class="timeline-content">
                            <h4>清华大学</h4>
                            <p data-lang="timeline.degree1">计算机科学与技术专业 本科</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2014-2016</div>
                        <div class="timeline-content">
                            <h4>斯坦福大学</h4>
                            <p data-lang="timeline.degree2">计算机科学专业 硕士</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2017-2020</div>
                        <div class="timeline-content">
                            <h4>Google</h4>
                            <p data-lang="timeline.job1">软件工程师</p>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-date">2021-2023</div>
                        <div class="timeline-content">
                            <h4>OpenAI</h4>
                            <p data-lang="timeline.job2">软件工程师</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人成就 -->
            <div class="achievements">
                <h3 data-lang="achievements.title">个人成就</h3>
                <div class="achievement-items">
                    <div class="achievement-item">
                        <i class="achievement-icon"></i>
                        <span>清华大学优秀毕业生</span>
                    </div>
                    <div class="achievement-item">
                        <i class="achievement-icon"></i>
                        <span>微软MVP</span>
                    </div>
                    <div class="achievement-item">
                        <i class="achievement-icon"></i>
                        <span>华为开发者认证</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 项目展示部分 -->
    <section id="projects" class="projects">
        <div class="container">
            <h2 data-lang="projects.title">项目展示</h2>
            <div class="project-grid">
                <!-- 项目1 - 大数据开发 -->
                <div class="project-item">
                    <img src="https://imgs.699pic.com/images/600/097/196.jpg!list1x.v2" alt="大数据开发" />
                    <div class="project-info">
                        <h3 data-lang="project1.title"></h3>
                        <p data-lang="project1.desc"></p>
                    </div>
                </div>
                <!-- 项目2 - 计算机开发 -->
        <div class="project-item">
            <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="计算机开发项目" class="project-image" />
            <div class="project-info">
                <h3 data-lang="project2.title"></h3>
                        <p data-lang="project2.desc"></p>
                    </div>
                </div>
                <!-- 项目3 - AI机器人研发 -->
                <div class="project-item">
                    <img src="https://images.unsplash.com/photo-1488590528505-98d2b5aba04b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="AI机器人研发项目" class="project-image" />
                    <div class="project-info">
                        <h3 data-lang="project3.title"></h3>
                        <p data-lang="project3.desc"></p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系我部分 -->
    <section id="contact" class="contact">
        <div class="container">
            <h2 data-lang="contact.title">联系我</h2>
            <div class="contact-content">
                <div class="contact-info">
                    <p><strong data-lang="contact.email">邮箱:</strong> 1203758159@qq.com</p>
                    <p><strong data-lang="contact.social">社交媒体:</strong></p>
                    <div class="social-links">
                        <a href="mailto:1203758159@qq.com">QQ邮箱</a>
                    </div>
                </div>
                <div class="contact-form">
                    <form id="contactForm">
                        <div class="form-group">
                            <label for="name" data-lang="form.name">姓名</label>
                            <input type="text" id="name" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="email" data-lang="form.email">邮箱</label>
                            <input type="email" id="email" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="message" data-lang="form.message">留言</label>
                            <textarea id="message" name="message" rows="5" required></textarea>
                        </div>
                        <button type="submit" class="btn" data-lang="form.submit">发送</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p data-lang="footer.copyright">&copy; 2024 我的个人作品集. 保留所有权利.</p>
        </div>
    </footer>

    <script src="language.js"></script>
    <script src="main.js"></script>
</body>
</html>